<%--
  +------------------+
      天 道 酬 勤    
  +------------------+
  Created by QiuShiju.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url('./static/1.jpg');
            background-size: 100%;
        }
        .login-container{
            width: 293px;
            height: 290px;
            border: 1px solid transparent;
            border-top: 0;
            border-bottom: 0;
            border-radius: 6px;
            background-color: #ccc;
            background-clip: padding-box;
            margin-left: 800px;
            margin-top: 200px;
        }
        .tx{
            background-image: url('./static/0.jpg');
            background-size: 100px;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            margin: 0 auto;
        }
        .username-box,.pwd-box,.btn-box {
            margin-top: 10px;
            font-size: 25px;
        }
        input {
            height: 25px;
            font-size: 21px;
            width: 170px;
        }
        button {
            font-size: 25px;
            width: 270px;
            margin-left: 9px;
            border-radius: 20px;
            background-color: #1a7bb9;
        }
    </style>
</head>
<body>
<div class="login-container">
    <form action="/login" method="post">
        <div>
            <div class="tx"></div>
            <div class="username-box">
                <lable>用户名</lable>
                <span>
                        <input type="text" name="username"><br>
                        <span id="uname-tip"></span>
                </span>
            </div>
            <div class="pwd-box">
                <lable>密&nbsp;&nbsp;&nbsp;码</lable>
                <span>
                        <input type="password" name="password"><br>
                        <span id="pwd-tip"></span>
                    </span>
            </div>
            <div class="btn-box">
                <button>登录</button>
            </div>
            <div>
                <a href="./regist.jsp">没有账户?去注册...</a>
            </div>
        </div>
    </form>
</div>
<script src="./static/jquery-2.1.0.js"></script>
<script>
    // 每次输入时,先清空样式
    $("input").focus(() => {
        $("input").css("border-color","")
        $("#uname-tip").text("")
        $("#pwd-tip").text("")
    })

    // 密码框失去焦点
    $("input[type=text]").blur(()=>{
        var username = $("input[type=text]").val();
        if (username == "") {
            $("#uname-tip").text("  *  用户名必填").css({color:"red",fontSize:"15px"})
        }
    })
    $("input[type=password]").blur(()=>{
        var password = $("input[type=password]").val();
        if (password == "") {
            $("#pwd-tip").text("  *  密码必填").css({color:"red",fontSize:"15px"})
        }
    })

    // 表单校验(为空 红框提示,密码用户名不正确弹框提示)
    $("form").submit(() => {
        var username = $("input[type=text]").val()
        var password = $("input[type=password]").val()
        if (username == "") {
            $("input[type=text]").css("border-color","red")
        }
        if (password == "") {
            $("input[type=password]").css("border-color","red")
        }

        if (username != "" && password != "") {
            return true;// 允许提交
        } else {
            alert("用户名和密码必填")
        }
        return false;
    })
</script>
</body>
</html>
